<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<meta name="Description" content="" />
		<meta name="Keywords" content="" />
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
	</head>

	<body>
		<div id="wrap" class="wrap" v-cloak>
			<!--头  S-->
			<keep-alive>
				<component :is='header_page'></component>
			</keep-alive>
			<!--头  E-->

			<!--S-->
			<keep-alive>
				<component :is='cur_page'></component>
			</keep-alive>
			<!--E-->

			<!--底  S-->
			<com_footer></com_footer>
			<!--底  E-->
		</div>

		<!--index 头部-->
		<template id="index_header_temp">
			<header class="clear_fix">
				<div class="logo fl">
					<a href="index.html">
						<img src="img/index_logo.png" />
					</a>
				</div>
				<div class="search fl">
					<form action="" method="post">
						<input type="text" placeholder="请输入商品名称" />
						<button></button>
					</form>
				</div>
				<div class="select fl">
					<select>
						<option value="gz">广州市</option>
						<option value="sz">深圳市</option>
						<option value="dg">东莞市</option>
					</select>
				</div>
			</header>
		</template>
		
		<!--classify 头部-->
		<template id="classify_header_temp">
			<header class="clear_fix">
				<button class="back-btn fl">Back</button>
				<div class="select fr">
					<select>
						<option value="gz">广州市</option>
						<option value="sz">深圳市</option>
						<option value="dg">东莞市</option>
					</select>
				</div>
				<div class="fenlei">分类</div>
			</header>
		</template>

		<!--discover 头部-->
		<template id="discover_header_temp">
			<header class="clear_fix">
				<button class="back-btn fl">Back</button>
				<div class="select fr">
					<select>
						<option value="gz">广州市</option>
						<option value="sz">深圳市</option>
						<option value="dg">东莞市</option>
					</select>
				</div>
				<div class="fenlei">发现</div>
			</header>
		</template>
		
		<!--my 头部-->
		<template id="my_header_temp">
			<header class="clear_fix">
				<button class="back-btn fl">Back</button>
				<div class="msg fr">
					<img src="img/xinfeng.png" />
				</div>
				<div class="fenlei">我的</div>
			</header>
		</template>

		<!--index 中心内容-->
		<template id="index_section_temp">
			<section>
				<!--css-->
				<link rel="stylesheet" type="text/css" href="css/index.css" />
				<!--css-->
				<div class="banner">
					<img src="img/index/banner.jpg" height="100%" />
				</div>

				<p class="hot-title clear_fix">
					<span class="fl"><i class="iconfont icon-xinghao"></i> 优惠团购</span>
					<span class="fr">更多 <i class="iconfont icon-arrow-circle-o-right"></i></span>
				</p>

				<div class="youhui-box clear_fix">
					<div class="youhui fl">
						<img src="img/index/discounts1.jpg" />
					</div>
					<div class="youhui fr">
						<img src="img/index/discounts2.jpg" />
					</div>
					<div class="youhui fl">
						<img src="img/index/discounts3.jpg" />
					</div>
					<div class="youhui fr">
						<img src="img/index/discounts4.jpg" />
					</div>
				</div>

				<p class="hot-title clear_fix">
					<span class="fl"><i class="iconfont icon-xin"></i> 猜你喜欢</span>
					<span class="fr">更多 <i class="iconfont icon-arrow-circle-o-right"></i></span>
				</p>

				<div class="maybe clear_fix">
					<div class="img-box fl">
						<img src="img/index/shop_wansui.jpg" height="100%" />
					</div>
					<div class="l-content fl">
						<p>万岁寿司（正佳店）</p>
						<p>[100店通用] 双人套餐</p>
						<p>￥88.00</p>
					</div>
					<div class="r-content fr">
						<p>&lt;100m</p>
						<p>已售1000</p>
					</div>
				</div>
				<div class="maybe clear_fix">
					<div class="img-box fl">
						<img src="img/index/shop_heiya.jpg" height="100%" />
					</div>
					<div class="l-content fl">
						<p>周黑鸭（正佳店）</p>
						<p>[100店通用] 双人套餐</p>
						<p>￥88.00</p>
					</div>
					<div class="r-content fr">
						<p>&lt;100m</p>
						<p>已售1000</p>
					</div>
				</div>
			</section>
		</template>

		<!--classify 中心内容-->
		<template id="classify_section_temp">
			<section>
				<!--css-->
				<link rel="stylesheet" type="text/css" href="css/classify.css" />
				<!--css-->
				<div class="fenlei-box clear_fix">
					<div class="img-box fl">
						<a href=""><img src="img/classify/classify (1).png" /></a>
						<p>美食</p>
					</div>
					<div class="img-box fl">
						<a href=""><img src="img/classify/classify (4).png" /></a>
						<p>电影</p>
					</div>
					<div class="img-box fr">
						<a href=""><img src="img/classify/classify (2).png" /></a>
						<p>唱歌</p>
					</div>
					<div class="img-box fr">
						<a href=""><img src="img/classify/classify (3).png" /></a>
						<p>运动</p>
					</div>
				</div>

				<div class="hot-title clear_fix">
					<span class="fl"><i class="iconfont icon-xinghao"></i> 美食类</span>
					<span class="fr">更多 <i class="iconfont icon-arrow-circle-o-right"></i></span>
				</div>

				<div class="imgs-box clear_fix">
					<div class="img-box fl">
						<a href=""><img src="img/classify/foods (1).png" /></a>
					</div>
					<div class="img-box fl">
						<a href=""><img src="img/classify/foods (4).png" /></a>
					</div>
					<div class="img-box fl">
						<a href=""><img src="img/classify/foods (2).png" /></a>
					</div>
					<div class="img-box fl">
						<a href=""><img src="img/classify/foods (4).png" /></a>
					</div>
				</div>

				<div class="hot-title clear_fix">
					<span class="fl"><i class="iconfont icon-xinghao"></i> 运动类</span>
					<span class="fr">更多 <i class="iconfont icon-arrow-circle-o-right"></i></span>
				</div>

				<div class="imgs-box clear_fix">
					<div class="img-box fl">
						<a href=""><img src="img/classify/foods (1).png" /></a>
					</div>
					<div class="img-box fl">
						<a href=""><img src="img/classify/foods (4).png" /></a>
					</div>
					<div class="img-box fl">
						<a href=""><img src="img/classify/foods (2).png" /></a>
					</div>
					<div class="img-box fl">
						<a href=""><img src="img/classify/foods (4).png" /></a>
					</div>
				</div>
				<div class="hot-title clear_fix">
					<span class="fl"><i class="iconfont icon-xinghao"></i> 电影类</span>
					<span class="fr">更多 <i class="iconfont icon-arrow-circle-o-right"></i></span>
				</div>

				<div class="imgs-box clear_fix">
					<div class="img-box fl">
						<a href=""><img src="img/classify/foods (1).png" /></a>
					</div>
					<div class="img-box fl">
						<a href=""><img src="img/classify/foods (4).png" /></a>
					</div>
					<div class="img-box fl">
						<a href=""><img src="img/classify/foods (2).png" /></a>
					</div>
					<div class="img-box fl">
						<a href=""><img src="img/classify/foods (4).png" /></a>
					</div>
				</div>
			</section>
		</template>

		<!--discover 中心内容-->
		<template id="discover_section_temp">
			<section>
				<!--css-->
				<link rel="stylesheet" type="text/css" href="css/discover.css" />
				<!--css-->
				<div class="search">
					<form action="" method="post">
						<input type="text" placeholder="请输入商品名称" />
						<button></button>
					</form>
				</div>
				<p class="all-search">大家都在搜</p>
				<table class="all-table" border="1" cellspacing="0">
					<tr>
						<td>
							<a href="">寿司</a>
						</td>
						<td>
							<a href="">羽毛球</a>
						</td>
						<td>
							<a href="">火锅</a>
						</td>
						<td>
							<a href="">游泳馆</a>
						</td>
					</tr>
					<tr>
						<td>
							<a href="">电影</a>
						</td>
						<td>
							<a href="">周黑鸭</a>
						</td>
						<td>
							<a href="">KTV</a>
						</td>
						<td>
							<a href="">肯德基</a>
						</td>
					</tr>
				</table>

				<div class="hot-title clear_fix">
					<span class="fl"><i class="iconfont icon-xinghao"></i> 热门搜索</span>
					<span class="fr">更多 <i class="iconfont icon-arrow-circle-o-right"></i></span>
				</div>

				<div class="four-img clear_fix">
					<div class="fantuan fl melon_photo_height">
						<img src="img/discover/hot_search (4).png" />
					</div>
					<div class="right fl">
						<div class="dandan melon_photo_width">
							<img src="img/discover/hot_search (3).png" />
						</div>
						<div class="fanjuan fl">
							<img src="img/discover/hot_search (2).png" />
						</div>
						<div class="pinpan fl">
							<img src="img/discover/hot_search (1).png" />
						</div>
					</div>
				</div>

				<div class="hot-title clear_fix">
					<span class="fl"><i class="iconfont icon-xinghao"></i> 推荐搜索</span>
					<span class="fr">更多 <i class="iconfont icon-arrow-circle-o-right"></i></span>
				</div>

				<div class="tuijian clear_fix">
					<div class="img-box fl">
						<a href=""><img src="img/discover/recommend (3).png" /></a>
					</div>
					<div class="img-box fl">
						<a href=""><img src="img/discover/recommend (2).png" /></a>
					</div>
					<div class="img-box fl">
						<a href=""><img src="img/discover/recommend (1).png" /></a>
					</div>
				</div>
			</section>
		</template>

		<!--my 中心内容-->
		<template id="my_section_temp">
			<section>
				<!--css-->
				<link rel="stylesheet" type="text/css" href="css/my.css" />
				<!--css-->
				<div class="personal clear_fix">
					<div class="touxiang fl">
						<img src="img/color.jpg" />
					</div>
					<div class="geren-msg fl">
						<p>点击登录</p>
						<input type="text" placeholder="常住地未设置" disabled/>
						<span>&gt;</span>
					</div>
				</div>
				<div class="classify clear_fix">
					<div class="box fl">
						<i class="iconfont icon-xinghao"></i>
						<p>我的点评</p>
					</div>
					<div class="box fr">
						<i class="iconfont icon-xinghao"></i>
						<p>我的收藏</p>
					</div>
					<div class="box">
						<i class="iconfont icon-xinghao"></i>
						<p>我的优惠卷</p>
					</div>
				</div>

				<div class="hot-title clear_fix">
					<span class="fl"><i class="iconfont icon-xinghao"></i> 我的钱包</span>
					<span class="fr">更多 <i class="iconfont icon-arrow-circle-o-right"></i></span>
				</div>
				<div class="hot-title clear_fix">
					<span class="fl"><i class="iconfont icon-xinghao"></i> 待点评</span>
					<span class="fr">更多 <i class="iconfont icon-arrow-circle-o-right"></i></span>
				</div>
				<div class="hot-title clear_fix">
					<span class="fl"><i class="iconfont icon-xinghao"></i> 找好友</span>
					<span class="fr">更多 <i class="iconfont icon-arrow-circle-o-right"></i></span>
				</div>
				<div class="hot-title clear_fix">
					<span class="fl"><i class="iconfont icon-xinghao"></i> 我的足迹</span>
					<span class="fr">更多 <i class="iconfont icon-arrow-circle-o-right"></i></span>
				</div>
				<div class="hot-title clear_fix">
					<span class="fl"><i class="iconfont icon-xinghao"></i> 设置</span>
					<span class="fr">更多 <i class="iconfont icon-arrow-circle-o-right"></i></span>
				</div>
				<div class="hot-title clear_fix">
					<span class="fl"><i class="iconfont icon-xinghao"></i> 联系</span>
					<span class="fr">更多 <i class="iconfont icon-arrow-circle-o-right"></i></span>
				</div>

				<div class="btn-box clear_fix">
					<button class="fl">退出</button><button class="fr">注销</button>
				</div>
			</section>
		</template>
		
		<!--底部-->
		<template id="footer_temp">
			<footer>
				<div class="fl foot-nav">
					<a @click="page('index')">
						<i class="iconfont icon-home1"></i>
					</a>
					<p>首页</p>
				</div>
				<div class="fl foot-nav">
					<a @click="page('classify')">
						<i class="iconfont icon-category"></i>
					</a>
					<p>分类</p>
				</div>
				<div class="fl foot-nav">
					<a @click="page('discover')">
						<i class="iconfont icon-compasszhinanzhen"></i>
					</a>
					<p>发现</p>
				</div>
				<div class="fl foot-nav">
					<a @click="page('my')">
						<i class="iconfont icon-rentou"></i>
					</a>
					<p>我的</p>
				</div>
			</footer>
		</template>
		
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//头部组件
			Vue.component('com_header', {
				template: '#header_temp',
			});
			//底部组件
			Vue.component('com_footer', {
				template: '#footer_temp',
				methods: {
					page: function(page_name) {
						switch(page_name) {
							case 'index':
								vm.cur_page = 'index';
								vm.header_page = 'header_index';
								break;
							case 'classify':
								vm.cur_page = 'classify';
								vm.header_page = 'header_classify';
								break;
							case 'discover':
								vm.cur_page = 'discover';
								vm.header_page = 'header_discover';
								break;
							case 'my':
								vm.cur_page = 'my';
								vm.header_page = 'header_my';
								break;
						}
					}
				},
			});

			var vm = new Vue({
				el: "#wrap",
				data: {
					cur_page: 'index',
					header_page:'header_index',
				},
				components: {
					//中心内容
					index: {
						template: '#index_section_temp'
					},
					classify: {
						template: '#classify_section_temp'
					},
					discover: {
						template: '#discover_section_temp'
					},
					my: {
						template: '#my_section_temp'
					},
					//头部
					header_index:{
						template:'#index_header_temp',
					},
					header_classify:{
						template:'#classify_header_temp',
					},
					header_discover:{
						template:'#discover_header_temp',
					},
					header_my:{
						template:'#my_header_temp',
					},
				},
			});
		</script>
	</body>

</html>